<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	    <title>hoyo</title>
		
	    <!-- Bootstrap -->
	    <link href="/hoyo/css/bootstrap.min.css" rel="stylesheet">
	    <link href="/hoyo/css/mine.css" rel="stylesheet" />
	    <style>
	    	#data-nav{
	    		margin-bottom: 0px;
	    	}
	    	.login{
	    		background-image: url(img/login-container-bc.jpg);
	    		padding: 0;
	    		background-position: center;
	    		background-repeat: no-repeat;
	    		height: 500px;
	    	}
	    </style>
	</head>
	<body>
		
			
		<div id="data-nav" class="navbar">
			<div class="container">
		  	<div class="navbar-header">
		      <a class="navbar-brand" href="/hoyo/">
		      	<img src="/hoyo/img/logo.png" class="data-img"/>
		      	<span class="data-span">主页</span>
		      </a>
		    </div>
		
	      <ul id="contributor" class="nav navbar-nav navbar-right">
	      	<li th:if="${session.userInfo!=null}">
	      		<a class="data-user" href="/hoyo/user/personalCenter">
	      			<img th:src="${session.userInfo.icon}" class="data-img img-circle" />
	      			<span class="nav-user-name" th:text="${session.userInfo.nickname}">iscream</span>
	      		</a>
	      	</li>
	      	<li th:if="${session.user==null}">
	      		<a href="/hoyo/login">
	      			<span>登录</span>
	      		</a>
	      	</li>
	      	<li th:if="${session.user==null}">
	      		<a href="/hoyo/register" style="padding-right:84px;">
	      			<span>注册</span>
	      		</a>
	      	</li>
	      	
	        <li class="dropdown">
	          <a href="/hoyo/upload" class="dropdown-toggle data-color">投稿</a>
	      	</li>
	      </ul>
		  </div>
		</div>
		<div class="container-fluid login">
			<div class="container" style="margin-top: 50px;">
				<h1 style="text-align: center;margin-bottom: 30px;" >登录</h1>
				<div class="row">
					<div class="col-lg-4 col-lg-offset-4">
						<form action="/hoyo/login" method="POST">
							<input id="account" name="account" type="text" class="form-control input-lg" placeholder="手机号/邮箱"/>
							<p th:text="${errorMsg}" id="accountMsg" style="height: 20px;margin: 6px 0 6px 13px"></p>  <!--错误信息-->
							<input id="password" name="password" type="password" class="form-control input-lg" placeholder="密码"/>
							<p id="passwordMsg" style="height: 20px;margin: 6px 0 6px 13px"></p>  <!--错误信息-->
						</form>
					</div>
				</div>
				<div class="row">
					<div class="col-lg-4 col-lg-offset-4">
						<div class="row"> 
							<div class="col-lg-6" style="margin-bottom: 20px;">
								<button id="loginBtn" class="btn btn-info btn-block btn-lg">登录</button>
							</div>
							<div class="col-lg-6">
								<a href="/hoyo/register" class="btn btn-default btn-block btn-lg">注册</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="/hoyo/js/jquery-3.2.1.min.js"></script>
    <script src="/hoyo/js/bootstrap.min.js"></script>
    <script src="/hoyo/js/vue.js"></script>
    <script src="/hoyo/js/iconfont.js"></script>
    <script type="text/javascript">
    	$(function(){
    		$("#loginBtn").click(function(){
				var account = $("#account").val();	
				var password = $("#password").val();
				var errorHappen = false;
				if(account == ""){
					$("#accountMsg").html("请输入账号");
					errorHappen = true;
				}
				if(password == ""){
					$("#passwordMsg").html("请输入密码");
					errorHappen = true;
				}
				if(errorHappen){
					return ;
				}
				$("form").submit();
    		});
    		
    		$("#account").focus(function(){
    			$("#accountMsg").html("");
    		});
    		
    		$("#password").focus(function(){
    			$("#passwordMsg").html("");
    		});
    	})
    </script>
</html>
